import React, { Component } from 'react';
import { List,Skeleton   } from 'antd';
import { PlayCircleOutlined } from '@ant-design/icons';
// 导入样式
import '../assets/css/hot.css'

export default class SongList extends Component {
    constructor(){
        super();
        this.state={
            loading:true,
            // 歌曲列表数组
            songList:[1,2,3,4],
            banner:''
        }
    }
    render() {
        const bannerStyle={
            backgroundImage:`url(${this.state.banner})`
        }
        return (
            <div className="hot-container">
                <Skeleton loading={this.state.loading} active={true}>
                    <div style={bannerStyle} className="banner"></div>
                    {/* 歌单列表 */}
                    <List
                            size="large"
                            dataSource={this.state.songList}
                            renderItem={item => <List.Item
                                actions={[<PlayCircleOutlined style={{fontSize:24}}/>]}
                            >{item.name}</List.Item>}
                        />
                </Skeleton>
            </div>
        )
    }

    componentWillMount(){
        this.getList();
    }

    // 请求热歌列表
    async getList(){
        const id=this.props.match.params.id;
        const res=await this.$http.get('/playlist/detail?id='+id);
        if(res.code===200){
            // 更新数据
            this.setState({songList:res.playlist.tracks,banner:res.playlist.coverImgUrl,loading:false});
        }
    }

    // 组件即将卸载的时候, 自动执行
    componentWillUnmount(){
        // 对this.setState()方法的功能进行重写
        this.setState=()=>false;
    }
}
